<template>
  <div class="box">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header class="index-header">
          <dv-decoration-3 style="width:250px;height:30px;" />
          <div class="index-header-right">
            欢迎：{{ username }} <button @click="loginout">退出登录</button>
          </div>
        </el-header>
        <el-main>
          <dv-border-box-1>
          <dv-decoration-5 style="width:300px;height:40px;margin:0 auto" />
          <div id="myChart"></div>
          </dv-border-box-1>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from "axios";
export default {
  data() {
    return {
      username: localStorage.getItem("user"),
    };
  },
  methods: {
    loginout() {
      const user = this.username;
      axios
        .post("http://localhost:8080/api/index", { user })
        .then((response) => {
          console.log(response);
        });
      localStorage.removeItem("user");
      localStorage.removeItem("pwd");
      localStorage.removeItem("token");
      this.$router.push("/");
    },
  },
  mounted() {
    const chart = document.getElementById('myChart')
    const myChart = echarts.init(chart);
    const option = {
        backgroundColor: '#323a5e50',
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '2%',
            right: '4%',
            bottom: '14%',
            top: '16%',
            containLabel: true
        },
        legend: {
            data: ['1', '2', '3'],
            right: 10,
            top: 12,
            textStyle: {
                color: "#fff"
            },
            itemWidth: 12,
            itemHeight: 10,
            // itemGap: 35
        },
        xAxis: {
            type: 'category',
            data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
            axisLine: {
                lineStyle: {
                    color: 'white'

                }
            },
            axisLabel: {
                 interval: 0,
                 rotate: 40,
                
            },
        },

        yAxis: {
            type: 'value',
            max: '1200',
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)'
                }
            },
            axisLabel: {}
        },
        "dataZoom": [{
            "show": true,
            "height": 12,
            "xAxisIndex": [
                0
            ],
            bottom: '8%',
            "start": 10,
            "end": 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
                color: "#d3dee5",

            },
            borderColor: "#90979c"
        }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
        }],
        series: [{
            name: '1',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                    }, {
                        offset: 1,
                        color: '#f5804d'
                    }]),
                    borderRadius: 12,
            },
            data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
        },
        {
            name: '2',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8bd46e'
                    }, {
                        offset: 1,
                        color: '#09bcb7'
                    }]),
                    borderRadius: 11,
            },
            data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
        },
        {
            name: '3',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#248ff7'
                    }, {
                        offset: 1,
                        color: '#6851f1'
                    }]),
                    borderRadius: 11,
            },
            data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
        }]
    };

    const app = {
        currentIndex: -1,
    };
    setInterval(function () {
        const dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });


    }, 1000);
    myChart.setOption(option);
  },
};
</script>

<style>
.box{
  width: 100%;
  height: 100%;
}
.el-header {
  background-image: linear-gradient(to right, #373b44, #4286f4);
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 100%;
}

.el-main {
  background: linear-gradient(to right, #d3cce3, #e9e4f0);
  color: #333;
  text-align: center;
  line-height: 100%;
}

.el-container {
  margin-bottom: 40px;
  height: 100%;
}
.index-header{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.index-header-right{
  width: 200px;
  margin-left: 60px;
}
#myChart {
    width: 600px;
    height: 300px;
    margin: 50px auto;
    background-color: rgba(4, 58, 89,0);
}
</style>